<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../include/base.jsp" %>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>CRM</title>
	<link rel="stylesheet" href="${basePath }/css/bootstraplan.css" />
	<link type="text/css" href="${basePath }/jquery-ui/css/ui-lightness/jquery-ui-1.8.24.custom.css" rel="stylesheet" /> 
	<link type="text/css" href="${basePath }/jquery-ui/css/ui-lightness/pack_datepicker.css" rel="stylesheet" /> 
	<link rel="stylesheet" type="text/css" href="${basePath }/fullcalendar/fullcalendar.css">
	<style type="text/css">
		#bodycontent{
			margin-top:90px;
		}
		.activity{
			position:relative;
			margin-top:5px;
			margin-left:20px;
			height:100px;
			border-bottom:1px solid #eee;
		}
		.dealpic{
			position:absolute;
			width:55px;
			height:55px;
			background-position:-502px -56px;
			background-image:url(img/all.png);
		}
		.info{
			position:absolute;
			top:10px;
			left:70px;
		}
		.del{
			position:absolute;
			top:10px;
			left:630px;
			display:none;
		}
		#outer{
			position:relative;
			
		}
		#addtask{
			position:absolute;
			top:5px;
			left:120px;
		}
		.li{
			margin-left:5px;
			margin-right:5px;
		}
		.box{width:290px; height:380x; border:1px solid #d4693e; border-radius:5px; margin-top: 47px; position:absolute; background-color: #fff;top:0px;left:118px;}
        .a1,.a2{width:0; height:0; overflow:hidden; border-width:10px; border-style:dotted dotted solid;  position:absolute}
        .abox{position: absolute; width:20px; height: 20px; left:20px; top:-20px}
        .a1{border-color:transparent transparent #D4693E;  top:-1px}
        .a2{border-color:transparent transparent #FFFFFF;  top:0}
        #mytask{
        	position:absolute;
        	top:200px;
        	left:500px;
        	border:1px solid #ccc;
        	padding:5px;
        	z-index:30;
        	background-color:pink;
        	display:none;
        }
	</style>
</head>
<body>
	<div class="navbar navbar-fixed-top"  style="background-color:#085F8A">
		<div class="navbar-inner" style="height:80px">
			<div class="container">
				<div class="row">
					<div class="span1"  id="tag"></div>
					<div class="span2" style="padding-top:6px">
						<a href="" style="display:inline;font-size:20px;font-weight:bold;color:#fff">客户关系管理</a>
					</div>
					<div class="span6" id="outer">
						<a href="addContact.action" class="btn" style="margin-top:10px;">添加联系人</a>
						<a href="javascript:;" class="btn" style="margin-top:5px;" id="addtask">添加日程</a>
						<div class="box" style="display:none;">
					        <div class="abox">
					            <div class="a1"></div>
					            <div class="a2"></div>
					        </div>
					        <p style="font-size: 12px;">
					        	<form action="${basePath }/task/addTask.action" method="post" style="padding-left:20px;padding-right:5px;">
					        		<span><strong>添加一个日程</strong></span><br/>
					        		<input type="text" class="span3" name="task.task"><br/>
					        		
					        		<div class="control-group">
										<label class="control-label" for="inputPassword">什么时候完成?或者<a href="#" style="color:green" id="specifiedTime">选择具体时间</a></label>
										<div class="controls">
											<select style="margin-left:2px" name="abstractTime" id="selectTime">
												<option value="今天">今天</option>
												<option value="明天">明天</option>
												<option value="本周">本周</option>
												<option value="下周">下周</option>
												<option value="以后">以后</option>
										
											</select>
											
											<div style="display:none;" id="dateTime">
												<input type="text" class="span2"  name="specifiedTime" id="datepicker"  />
												<a href="#" style="color:green" id="cansel">取消</a>
											</div>
										</div>
										
									</div>
										<div class="control-group">
										<label class="control-label" for="inputPassword">选择一个类别</label>
										<div class="controls">
											<select style="margin-left:2px" name="category" class="span2">
												<option value="打电话">打电话</option>
												<option value="发邮件">发邮件</option>
												<option value="发传真">发传真</option>
												<option value="开会">开会</option>
												
										
											</select><a href="#" style="color:green">修改类别</a>
										</div>
										
									</div>
									<div class="control-group">
										<label class="control-label" for="inputPassword">谁可以看见这个日程</label>
										<div class="controls">
											<select style="margin-left:2px" name="task.views" class="span3">
												<option value="所有人">所有人</option>
												<option value="只有我">只有我</option>
												<option value="同组">我和同组的人</option>
												
										
											</select>
										</div>
										
									</div>
									<div style="border:1px solid #000;"></div>
									<input type="submit" class="btn btn-info" value="添加">
									<input  type="button" class="btn btn-info" value="取消" id="canseldiv">
					        	</form>
					        </p>
					    </div>
					</div>
					<div class="span3">
						<ul class="nav pull-right">
						    <li class="divider-vertical"><br></li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 用户设置<b class="caret"></b></a>
								<ul class="dropdown-menu">
									<li>
										<a href="#">个人信息</a>
									</li>
									<li>
										<a href="#">修改密码</a>
									</li>
									<li>
										<a href="#">服务中心</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">安全退出</a>
							</li>
						</ul>
					
					
					</div>
				</div>
			</div>
		
		</div>
	
	</div>
	<div class="row-fluid" id="bodycontent">
	
		<div class="span3" style="height:400px">
				<div class="wall" style="padding:8px 0;">
					<ul class="nav nav-list" >
						<li class="nav-header" style="padding-top:0px">Welcome!</li>
						<li class="divider"><br></li>
						<li ><a href="${basePath }/home.action"><i class="icon-white icon-home"></i>最新动态</a></li>
						<li><a href="${basePath }/contactlist.action"><i class="icon-user"></i>联系人</a></li>
						<li class="active"><a href="${basePath }/task/toCalendar.action"><i class="icon-leaf"></i>日程</a></li>
						<li><a href="${basePath }/deal.action"><i class="icon-gift"></i>交易</a></li>
						<li><a href="${basePath }/emails.action"><i class="icon-gift"></i>群发邮件</a></li>
					</ul>
				</div>
		</div>
	<div class="span8" style="background-color:#fff;height:800px;border:1px solid #ccc;border-radius:2px">
			<div id="calendar"></div>  
			 <div class="control-group"  id="mytask">
					<label class="control-label" for="inputPassword">修改交易名称</label>
					<div class="controls">
						<input type="text"  id="myTaskName" name="task">
						
					</div>
					<input type="button" class="btn" value="修改" id="updateTask">
					<input type="button" class="btn" value="删除交易" id="delTask">
					<input type="button" class="btn" value="关闭" id="canselthis">
					<input type="hidden" id="taskid">
			</div> 
	</div>	
		
	</div>
	
	<script type="text/javascript" src="${basePath }/js/jquery.js"></script>
	<script type="text/javascript" src="${basePath }/js/bootstrap.min.js"></script>	
    <script type="text/javascript" src="${basePath }/jquery-ui/js/jquery-ui-1.8.24.custom.min.js"></script> 
	<script type="text/javascript" src="${basePath }/fullcalendar/fullcalendar.min.js"></script> 
	<script type="text/javascript" src="${basePath }/fullcalendar/jquery.ui.core.js"></script> 
	<script type="text/javascript" src="${basePath }/fullcalendar/jquery.ui.draggable.js"></script> 
	<script type="text/javascript" src="${basePath }/fullcalendar/jquery.ui.resizable.js"></script> 
	
	<script type="text/javascript">
		$(document).ready(function(){
			var date = new Date();  
            var d = date.getDate();  
            var m = date.getMonth();  
            var y = date.getFullYear();  
             	 
            var calendar = $("#calendar").fullCalendar({  
                header: {  
                    left: 'prev,next today',  
                    center: 'title',  
                    right: 'month,agendaWeek,agendaDay',
                      
                },
                monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],  
	            monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],  
	            dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],  
	            dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],  
	           today: ["今天"],  
	            firstDay: 1,  
	          buttonText: {  
	              today: '本月',  
	             month: '月',  
	              week: '周',  
	             day: '日',  
	             
	              },  
                viewDisplay: function(view) {  
                    var viewStart = $.fullCalendar.formatDate(view.start,"yyyy-MM-dd");  
                    var viewName = view.name;  
                    //alert(viewStart+viewName);  
                    $("#calendar").fullCalendar('removeEvents');  
                    $.getJSON("${basePath}/task/findTasks.action",{start:viewStart,viewName:viewName},function(data) {  
                        for(var i=0;i<data.length;i++) {  
                            //alert(data[i].id);  
                            //alert(data[i].allDay);  
                            var obj = new Object();  
                            obj.id = data[i].id;  
                            obj.title = data[i].task;  
                              
                            obj.start = new Date(Date.parse(data[i].starttime));  
                            obj.end = new Date(Date.parse(data[i].endtime));
                             
                            //alert(data[i].start);  
                            //alert(obj.start);  
                            //alert($.fullCalendar.formatDate(obj.start,"yyyy-MM-dd HH:mm:ss"));  
                            $("#calendar").fullCalendar('renderEvent',obj,true);//把从后台取出的数据进行封装以后在页面上以fullCalendar的方式进行显示  
                        }  
                    });  
                },  
                selectable: true,  
                selectHelper: true,  
                select: function(start, end, allDay) {  
                    var title = prompt('请输入名称:');  
                    
                    if (title) {  
                       
                        $.post("${basePath}/task/calendarAddTask.action",{//把刚输入的日程计划信息传到后台，保存到数据库  
                            title: title,  
                            start:($.fullCalendar.formatDate(start,'yyyy-MM-dd')) ,  
                            end:($.fullCalendar.formatDate(end,'yyyy-MM-dd')),  
                            allDay:allDay},function(data){
                           	  calendar.fullCalendar('renderEvent',  
                            {  
                            	id:data.id,
                                title: title,  
                                start: start,  
                                end: end,  
                                allDay: allDay  
                            },  
                            true // make the event "stick"  
                        );//把刚输入的日程计划在页面上进行显示  
                           calendar.fullCalendar('unselect');  
                            }  
                        );
                       
                        
                   
                           
                     
                    }
                    
                    
                },
                  
                editable: true,  
                //events:'/tiantian/schedule/containEvents'  
                events:[],//表示初始化时的数据，这里是空的，等前面的ajax请求返回后就会有新的数据在页面显示  
        		eventClick:function(calEvent,jsEvent,view) { 
				//点击日程的触发 
				$("#myTaskName").val(calEvent.title);
				 $("#mytask").show();
				 var myTitle = null;;
				$("#updateTask").click(function(){
					 myTitle = $("#myTaskName").val();
					 
					 if(myTitle==null){return false}
					 calEvent.title=myTitle; 
					 $('#calendar').fullCalendar('renderEvent', true);
					
					$.post("${basePath}/task/calendarUpdateTitle.action",{id:calEvent.id,title:calEvent.title});
					$("#mytask").hide();
				});
				
				 $("#delTask").click(function(){
				 	$("#mytask").hide();
				 	
				 	
				 	$("#calendar").fullCalendar('removeEvents', calEvent.id);
				 	 $.get("${basePath}/task/calendarDelTask.action",{id:calEvent.id});
				 	
				 });
				
				 //刷新 
				 //$.post("task/calendarUpdateTitle.action",{id:calEvent.id,title:calEvent.title});
				//	var str="../schedule.do?ifUpdate=1&method=selectRiChengs&id="+calEvent.id; 
				//	window.location.href=str; 
				
				} ,
				//removeEvents: $('#calendar').fullCalendar('removeEvents',71)
               /* dayClick: function(date, allDay, jsEvent, view) {
		        if (allDay) {
		            alert('Clicked on the entire day: ' + date);
		            alert(event.title);
		        }else{
		            alert('Clicked on the slot: ' + date);
		        }
		        alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
		        alert('Current view: ' + view.name);
		        // change the day's background color just for fun
		       
		    	}, */
		    	eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
		      /*   alert(
		            event.id + ":" +event.title + " :" + $.fullCalendar.formatDate(event.start,'yyyy-MM-dd')+
		            ":" + $.fullCalendar.formatDate(event.end,'yyyy-MM-dd')
		            
		        ); */
		       
		        if (!confirm("你确定要改变时间吗?")) {
		         	
		            revertFunc();
		        }
		         
		         	$.post("${basePath}/task/calendarUpdateTime.action",{
		            id:event.id,
		            start:$.fullCalendar.formatDate(event.start,'yyyy-MM-dd'),
		            end:$.fullCalendar.formatDate(event.end,'yyyy-MM-dd')
		          });
		         
		         
			
		    }
		       });  
          
            //setTimeout("myinit()",1000);  
              
            //alert($.fullCalendar.parseDate(3600)+"ddddddddddd"); 
          $("#canselthis").live("click",function(){
          	$("#mytask").hide();
          });
          
				
             
        });  
		
	</script>
	
	
</body>
</html>